class VueRouterHash {
  static installed = false
  static Vue
  static install (Vue) {
    if (VueRouterHash.installed) return
    VueRouterHash.Vue = Vue
    VueRouterHash.installed = true
    Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
  constructor(options) {
    this.data = Vue.observable({
      current: this.hash
    })
    this.options = options
    this.init()
  }

  get hash() {
    const hash = window.location.hash
    return hash.substring(1)
  }

  init() {
    this.initMap()
    this.onHashChange()
    this.createComponent()
  }

  initMap() {
    this.routerMap = {}
    this.options.routes.forEach(item => this.routerMap[item.path] = item.component)
  }

  onHashChange() {
    console.log(window.location);
    window.onhashchange = () => {
      console.log(this.hash);
      this.data.current = this.hash
    }
  }

  createComponent () {
    const { Vue } = VueRouterHash
    const self = this
    Vue.component('router-link', {
      props: {
        to: String,
      },
      computed: {
        href () {
          return '#' + this.to
        }
      },
      template: `<a :href='href'><slot/></a>`,
    })
    Vue.component('router-view', {
      render(h) {
        const current = self.data.current
        return Vue.compile(self.routerMap[current || '/']).render.call(this)
      }
    })
  }
}